<%--
  Created by IntelliJ IDEA.
  User: 王凯璇
  Date: 2020/12/18
  Time: 22:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>每月租车情况</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1500px;height:750px;"></div><!--width:1500px;height:750px;-->

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // var xData = function() {
    //     var data = [];
    //     for (var i = 2011; i <= 2012; i++) {
    //         for (var j = 1; j<= 12; j++){
    //
    //         }
    //           data.push(i + "-" +j);
    //     }
    //     return data;
    // }();

    option = {
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: true
                },
                magicType: {
                    show: false,
                    type: ["line", "bar"]
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        title: {
            text: "不同月份的租车情况",
            textStyle: {
                color: "#ffffff",
                fontSize:'30'
            },
            left: 'center',
            top:30,
        },
        backgroundColor: "#1A1835",

        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
                textStyle: {
                    color: "#fff"
                }

            },
        },
        grid: {
            borderWidth: 0,
            top: 110,
            bottom: 95,
            textStyle: {
                color: "#fff"
            }
        },
        legend: {
            // x: '50%',
            top: '11%',
            textStyle: {
                color: '#90979c'
            },
            data: ['casual','registered','count']
        },


        calculable: true,
        xAxis: [{
            type: "category",
            axisLine: {
                lineStyle: {
                    color: "rgba(204,187,225,0.5)",
                }
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            data: [],
        }],

        yAxis: [{
            type: "value",
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(204,187,225,0.5)",
                }
            },

        }],
        dataZoom: [{
            show: true,
            height: 30,
            xAxisIndex: [0],
            bottom: 30,

            "start": 10,
            "end": 80,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '110%',
            handleStyle: {
                color: "#5B3AAE",
            },
            textStyle:{
                color:"rgba(204,187,225,0.5)",
            },
            fillerColor:"rgba(67,55,160,0.4)",
            borderColor: "rgba(204,187,225,0.5)",

        }, {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35
        }],
        series: [{
            name: "casual",
            type: "line",
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
                color: "#6f7de3",
            },
            markPoint: {
                label: {
                    normal: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                data: [{
                    type: 'max',
                    name: '最大值',

                }, {
                    type: 'min',
                    name: '最小值'
                }]
            },
            data: [],
        }, {
            name: "registered",
            type: "line",
            symbolSize: 10,
            symbol: 'circle',
            itemStyle: {
                color: "#03714e",
            },
            markPoint: {
                label: {
                    normal: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                data: [{
                    type: 'max',
                    name: '最大值',

                }, {
                    type: 'min',
                    name: '最小值'
                }]
            },
            data: []
        },
            {
                name: "count",
                type: "line",
                symbolSize: 10,
                symbol: 'circle',
                itemStyle: {
                    color: "#c257f6",
                },
                markPoint: {
                    label: {
                        normal: {
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    data: [{
                        type: 'max',
                        name: '最大值',

                    }, {
                        type: 'min',
                        name: '最小值'
                    }]
                },
                data: []
            }
        ]
    }
    var time = [];
    var causal = [];
    var registered = [];
    var count = [];

    $.ajax({
        url: 'rentc',
        method: "post",
        datatype: "json",
        success: function(data) {
            alert(JSON.stringify(data));  //测试ajax是否成功调用了servlet

            if(data) {
                for (var i=0;i<data.length;i++) {
                    time.push(data[i]['time']); //time.push(data[i]['time']);
                }
                for (var i=0;i<data.length;i++) {
                    causal.push(data[i]['casual']);
                }
                for (var i=0;i<data.length;i++) {
                    registered.push(data[i]['registered']);
                }
                for (var i=0;i<data.length;i++) {
                    count.push(data[i]['count']);
                }

                myChart.setOption({
                    xAxis:[{data:time}],
                    series: [{
                        data: causal
                    }, {
                        data: registered
                    },{
                        data: count
                    }]
                })
            }

        },
        error: function (errMsg) {
            console.error(errMsg)
        }
    });
    myChart.setOption(option);
</script>

</body>
</html>
